import { useEffect, useState } from 'react';
// import Image from 'next/image';
import smartfetch from '@mmstudio/an000058';
// import Link from '../../components/link';
import { Result } from './api/account/getname.api';
import api from '../atoms/api';

export default function Profile() {
	const [username, setusername] = useState('');
	const [picture, setpicture] = useState('');
	useEffect(() => {
		void (async () => {
			const data = await smartfetch<Result>(api.account.getname, 'get');
			setusername(data.username);
			setpicture(data.picture);
		})();
	}, []);
	return <div className='cls001'>
		{picture && <img className='img' src={picture} />}
		<span className='user'>
			<span>{username}</span>
		</span>
		<a className='logout' href={api.account.logout}>
			<img className='logouticon' src='/images/log-out-outline.svg' />
			<span>退出登录</span>
		</a>
		<style jsx>{`
.img{
width: 2rem;
height: 2rem;
border-radius: 50%;
margin-right: 1rem;
}
.user{
	margin: 0;
}
.logout{
	padding: 0 5rem 0 2rem;
}
.logouticon{
	width:1.5rem;
	height:1.5rem;
	margin: 0 0.2rem;
}
span{
	color: #333333;
	font-size: 0.9rem;
}
.cls001{
	display: block;
}
`}</style>
	</div>;
}
